import React,{useState,useEffect} from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
    FlatList,
    Text,
    TextInput,
    Image,
    TouchableOpacity
} from 'react-native';
import { AntDesign, Ionicons } from '@expo/vector-icons';
import '../../features/Phone';

const Search = ({navigation}) => {
    const [txt,setTxt] = useState('');
    const [record,setRecord] = useState([]);
    const [example,setExample] = useState([]);
    const searchHistory = () => {
        fetch('http://175.27.190.73:9000/search')
            .then(res=>res.json())
            .then(res=>{
                setRecord(res.allHistory);
            })
    };
    const delHistory = () => {
        fetch('http://175.27.190.73:9000/search', {
            method: 'POST',
            headers: new Headers({
                'Content-Type': 'application/json'
            }),
            body: JSON.stringify({del: 'del'})
        })
    };
    const searchHot = () => {
        fetch('http://175.27.190.73:9000/search/hot')
            .then(res=>res.json())
            .then(res=>{
                setExample(res.hotHistory)
            })
    };

    useEffect(()=>{
        searchHistory();
        searchHot();
    },[])

    useEffect(()=>{
        searchHistory();
    },[record])

    return (
        <View style={{width:w, height:h, backgroundColor:'#f0f0f0'}}>
            {/* 顶部搜索框 */}
            <View style={{
                width: w,
                padding: 10,
                paddingRight: 18,
                paddingTop: 30,
                backgroundColor: 'white',
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
            }}>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={()=>{navigation.goBack('Home')}}
                >
                    <Ionicons name="chevron-back" size={30} color="black" />
                </TouchableOpacity>
                <View style={{
                    width: w*0.8,
                    height: h*0.04,
                    borderRadius: h*0.02,
                    backgroundColor: '#e8e8e8',
                    flexDirection: 'row',
                    alignItems: 'center'
                }}>
                    <TextInput 
                        value={txt}
                        onChangeText={e => setTxt(e)}
                        placeholder={'请输入您要搜索的关键字'}
                        placeholderTextColor='gray'
                        style={{
                            width: '90%',
                            height: '100%',
                            color: 'gray',
                            paddingLeft: 18,
                        }}
                    />
                    <View style={{width:0, height:16, borderRightWidth:2, borderRightColor:'#cfcfcf', marginRight:6}}></View>
                    <TouchableOpacity
                        activeOpacity={0.7}
                        onPress={()=>{
                            if(txt != '') {
                                searchHistory();
                                navigation.navigate('Searchlist',{name:txt});
                            }
                        }}
                    >
                        <AntDesign name='search1' color='gray' size={20} />
                    </TouchableOpacity>
                </View>
            </View>

            <View style={{width:w}}>
                {/* 历史记录 */}
                {
                    JSON.stringify(record) == '[]' ? null :
                    <View>
                        <View style={{width:w, padding:18, paddingBottom:0, flexDirection:'row', justifyContent:'space-between'}}>
                            <Text style={{fontSize:20, color:'black'}}>历史记录</Text>
                            <TouchableOpacity
                                activeOpacity={0.7}
                                onPress={()=>{
                                    delHistory();
                                    searchHistory();
                                }}
                            >
                                <AntDesign name="delete" size={20} color="gray" />
                            </TouchableOpacity>
                        </View>
                        <View style={{width:w, padding:18, paddingTop:0,flexDirection:'row', flexWrap:'wrap'}}>
                            {
                                record.map((item)=>{
                                    return (
                                        <TouchableOpacity
                                            activeOpacity={0.7}
                                            onPress={()=>{
                                                navigation.navigate('Searchlist',{name:item.content});
                                            }}
                                        >
                                            <View
                                                key={item.id}
                                                style={{
                                                    backgroundColor: 'lightgray',
                                                    padding: 7,
                                                    paddingLeft: 10,
                                                    paddingRight: 10,
                                                    borderRadius: 12,
                                                    margin: 10,
                                                    marginLeft: 0
                                                }}
                                            >
                                                <Text style={{fontSize:15, color:'#4f4f4f'}}>
                                                    {item.content}
                                                </Text>
                                            </View>
                                        </TouchableOpacity>
                                        
                                    )
                                })
                            }
                        </View>
                    </View>
                }

                {/* 热门 */}
                <View>
                    <View style={{width:w, padding:18, paddingBottom:0, flexDirection:'row', justifyContent:'space-between'}}>
                        <Text style={{fontSize:20, color:'black'}}>热门</Text>
                    </View>
                    <View style={{width:w, padding:18, paddingTop:0,flexDirection:'row', flexWrap:'wrap'}}>
                        {
                            example.map((item)=>{
                                return (
                                    <TouchableOpacity
                                        activeOpacity={0.7}
                                        onPress={()=>{
                                            navigation.navigate('Searchlist',{name:item.content});
                                        }}
                                    >
                                        <View
                                            key={item.id}
                                            style={{
                                                backgroundColor: 'lightgray',
                                                padding: 7,
                                                paddingLeft: 10,
                                                paddingRight: 10,
                                                borderRadius: 12,
                                                margin: 10,
                                                marginLeft: 0
                                            }}
                                        >
                                            <Text style={{fontSize:15, color:'#4f4f4f'}}>
                                                {item.content}
                                            </Text>
                                        </View>
                                    </TouchableOpacity>
                                    
                                )
                            })
                        }
                    </View>
                </View>
            </View>
        </View>
    )
};

const styles = StyleSheet.create({
})

export default Search
